<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.carTypeCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carTypeCode">
              <a-input v-model="model.carTypeCode" :placeholder="$t('common.form.rule.input',{label: $t('columns.carTypeCode')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.carImage')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload :fileSizeLimit="600" class="avatar-uploader" :text="$t('common.form.upload')" v-model="model.carImage" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.carTypeName')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carTypeName">
              <a-input v-model="model.carTypeName" :placeholder="$t('common.form.rule.input',{label: $t('columns.carTypeName')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.color')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="color">
              <a-input v-model="model.color" :placeholder="$t('common.form.rule.input',{label: $t('columns.color')})" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.initialConsumption')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initialConsumption">
              <a-input-number v-model="model.initialConsumption" :placeholder="$t('common.form.rule.input',{label: $t('columns.initialConsumption')})" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.loadCapacity')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="loadCapacity">
              <a-input v-model="model.loadCapacity" :placeholder="$t('common.form.rule.input',{label: $t('columns.loadCapacity')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.maxSpeed')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maxSpeed">
              <a-input v-model="model.maxSpeed" :placeholder="$t('common.form.rule.input',{label: $t('columns.maxSpeed')})"  ></a-input> 
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.maxRange')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maxRange">
              <a-input v-model="model.maxRange" :placeholder="$t('common.form.rule.input',{label: $t('columns.maxRange')})"  ></a-input> 
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.motorPower')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="motorPower">
              <a-input v-model="model.motorPower" :placeholder="$t('common.form.rule.input',{label: $t('columns.motorPower')})"  ></a-input> 
            </a-form-model-item>
          </a-col>
          <a-col v-if="bizModel != 'nonRental'" :span="24">
            <a-form-model-item :label="$t('columns.depositAmount')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deposit">
              <a-input-number v-model="model.depositAmount" :placeholder="$t('common.form.rule.input',{label: $t('columns.depositAmount')})" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col v-if="bizModel != 'nonRental'" :span="24">
            <a-form-model-item :label="$t('columns.insureAmount')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deposit">
              <a-input-number v-model="model.insureAmount" :placeholder="$t('common.form.rule.input',{label: $t('columns.insureAmount')})" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<i18n>
  {
    "zh-CN": {
      "columns": {
       "carTypeCode": "类型编码",
       "carImage": "电单车照片",
       "carTypeName":"类型名称",
       "loadCapacity": "载核人数",
       "maxSpeed": "最高车速km/h",
       "maxRange": "续航里程km",
       "motorPower": "电机功率w",
       "initialConsumption": "初始功耗",
       "color": "颜色",
       "depositAmount": "押金金额",
       "insureAmount": "保险金额"
      }
    },
    "en-US": {
      "columns": {
        "carTypeCode": "Type Code",
        "carImage": "Electric bike photo",
        "carTypeName":"Type Name",
        "loadCapacity": "Number of Nuclear Carriers",
        "maxSpeed": "Maximum speed (km/h)",
        "maxRange": "Range km",
        "motorPower": "Motor power w",
        "initialConsumption": "Initial power consumption",
        "color": "Colour",
        "depositAmount": "Deposit Amount",
        "insureAmount": "Insurance Amount"
      }
    },
    "fr-FR": {
      "columns": {
        "carTypeCode": "Codage de type",
        "carImage": "Photos de vélos électriques",
        "carTypeName":"Nom du type",
        "loadCapacity": "Nombre de porteurs nucléaires",
        "maxSpeed": "Vitesse maximale du véhicule km/h",
        "maxRange": "Kilométrage d'endurance km",
        "motorPower": "Puissance du moteur W",
        "initialConsumption": "Consommation électrique initiale",
        "color": "Couleur",
        "depositAmount": "Montant du dépôt",
        "insureAmount": "Montant de l'assurance"
      }
    }
  }
</i18n>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'RentalCarTypeForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/rental/ebike-type/add",
          edit: "/rental/ebike-type/edit",
          queryById: "/rental/ebike-type/queryById",
          // typelist:"/charge/ebike-type/list",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
      bizModel(){
        // 获取当前页面的路径名
        const pathname = window.location.pathname;
        // 使用 split('/') 方法将路径名按 '/' 分割成数组
        const pathSegments = pathname.split('/');
        // 获取数组的最后一个元素，即最后一个路径段
        const lastSegment = pathSegments[pathSegments.length - 1];
        console.error('最后一个路径段:', lastSegment); // 输出: nonRental
        return lastSegment;
      }
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>